<template>
<div>
  <van-panel title="您已成功购买VIP" desc="订单详情如下" status="支付成功">
  <div>
     <van-field
    :v-model="result.out_trade_no"
    name="用户名"
    label="订单号"
    :placeholder="result.out_trade_no"
    :rules="[{ required: false, message: '请填写用户名' }]" readonly
  />
  <van-field
    :v-model="result.trade_no"
    name="密码"
    label="交易号"
    :placeholder="result.trade_no"
    :rules="[{ required: false, message: '请填写密码' }]" readonly
  />
      <van-field
    :v-model="result.timestamp"
    name="密码"
    label="付款时间"
    :placeholder="result.timestamp"
    :rules="[{ required: false, message: '请填写密码' }]" readonly
  />

  </div>
  <template #footer>
    <div>
      <router-link to="/fication">
    <van-button size="small" type="danger" >确定</van-button>
        </router-link>
      </div>
  </template>
</van-panel>


</div>
</template>

<script>
export default {
name: "PaySuccess",
  data(){
  return{
     result: {},
  }

  },
  methods:{

  },
   created() {
    // url后拼接的参数：?及后面的所有参数 => ?a=1&b=2
    // console.log(location.search);

    // 解析支付宝回调的url参数
    console.log(location.search)
    let params = location.search.substring(1);  // 去除? => a=1&b=2
    let items = params.length ? params.split('&') : [];  // ['a=1', 'b=2']
    //逐个将每一项添加到args对象中
    for (let i = 0; i < items.length; i++) {  // 第一次循环a=1，第二次b=2
      let k_v = items[i].split('=');  // ['a', '1']
      //解码操作，因为查询字符串经过编码的
      if (k_v.length >= 2) {
        // url编码反解
        let k = decodeURIComponent(k_v[0]);
        this.result[k] = decodeURIComponent(k_v[1]);
        // 没有url编码反解
        // this.result[k_v[0]] = k_v[1];
      }

    }
    // 解析后的结果
    console.log(this.result);


    // 把地址栏上面的支付结果，再get请求转发给后端
    this.$axios({
      url: this.$settings.base_url + '/api/v1/order/success/' + location.search,
      method: 'get',
    }).then(response => {
      console.log(response.data);
      if (response.data.code != 100) {
        alert(response.data.msg)
      }
    }).catch(() => {
      console.log('支付结果同步失败');
    })
  },
}
</script>

<style scoped>

</style>